﻿#contentItem {
     list-style:none; /* no list style */
     margin:100px 0; /* margin 100px */
     height:550px; /* height of contentitem */
}
 
#contentitem li
   { display:block; float:left; /* Dsplay all elements in a block form, float to the left of div */
    margin-top: 60px; /* margin from top of div */
    margin-left: 3%; /* margin from left of dv */
   -webkit-perspective: 500; -webkit-transform-style: preserve-3d; /* perspective and transform to make sure the element rotate correctly  to the parent */
   padding-right: 80px; /* padding from right between li items */
   padding-bottom: 200px; /* padding from bottom  */
   -webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; } /* transiiton used for the rotation and the duration */
   
#contentitem li:hover {
     -webkit-perspective: 5000; /* when hovering set new perspective , since it is defined in the transition it will animate correctly */
}
 
#contentitem li:hover img { 
    -webkit-transform: rotateY(0deg); 
}
 

.contentinfo { 
    border:10px solid #fcfafa; /* define border for the box */
    padding:20px; /* padding 20px */
    width:200px; /* width of the box */
    height:180px; /* height of the box */
    background-color:#deddcd; /* background color of the box */
    margin:-195px 0 0 55px; 
    position:absolute; /* position absolute to the parent div */
   -moz-box-shadow:0 20px 40px #888;  /* apply shadow for use in mozilla */
   -webkit-box-shadow:0 20px 40px #888; /* apply shadow for chrome */
   -webkit-transform: translateZ(30px) rotateY(30deg); /* the rotation effect on the box */
   -webkit-transition-property: transform, box-shadow, margin; /* transform the shadow asweell */
   -webkit-transition-duration: 0.5s; } /* the duration of the transform */
 
/* Animate everything to their 2d state when hovering the parent. */
#contentitem li:hover .contentinfo
   { -webkit-transform: rotateY(0deg); 
     -webkit-box-shadow:0 5px 10px #888;
      margin:-175px 0 0 30px; 
}
 
/* Some basic CSS for the content info */
.contentinfo h3 { 
    color:#7a3f3a; /* color of the title */
    font-variant: small-caps; /* small caps on text */
    font-family:Georgia,serif,Times; /* use this font */
    text-align:center; /* center of box */
    padding-bottom:15px; /* padding from bottom of div */
}
.contentinfo p { 
    padding-bottom:15px; /* padding from bottom of div */
}
.contentinfo a { 
    background-color:#7a3f3a; /* text color on the link */
    padding:5px 10px; /* padding */
    color:#eee; /* color on text */
    text-decoration:none; /* no decoration on link */
    display:block; /* display in block format */
    width:80px; /* width of the link */
    text-align:center; /* center of box */
    margin:0 auto; /* margin auto */
   -moz-border-radius:5px; /* border for rounded corners used in mozilla  */
   -webkit-border-radius:5px;  /* border for rounded corners used in chrome */
}

.contentinfo a:hover, .contentinfo a:focus { 
background-color:#6a191f; /* change color slightly when hovering over link */
color:#fff; /* change text color slightly */
}

body {
	background:url('../images/wrapperbg.png') no-repeat; /* background used on the wrapper */
    height: 640px; /* height of the wrapper bg */
}

#wrapper { /* */
	width:1400px; /* width of the wrapper */
    margin-top: 3%; /* margin from top */
	margin-left: 15%; /* margin from left */
    margin-right: 50%; /* margin from right */
    height: 727px; /* height of wrapper */
    border: 30px solid yellow; /* border around the main content */
    padding: 0px 6px 6px 0px; /* padding */
    background-color: #9FB2C1; /* default background color if image not found */
    border-top-width: 5px; 
    border-right-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 5px;
    border-style: solid;
    border-color: #082F70;
    border-top-left-radius: 1% 1%;
    border-bottom-right-radius:  1% 1%;
    border-bottom-left-radius:  1% 1%;
    border-top-right-radius:  1% 1%;
    padding: 0;
}
#header {
	background:url(../images/header.png); /* background on the header div */
	width: 100%; /* width is 100% of the wrapper */
	height: 200px; /* height is 200px of the wrapper */
}
#sidepanel{
	width: 20%; /* sidepanel is 20% of wrapper div */
    height: 527px; /* height is 527px of wrapper div */
	float: right; /* float to the right of the wrapper div */
background:url(../images/sidebg.png); /* use this background on the sidepanel */
	}

#background {
    background-image:url('../images/homescreen.png'); /* background on the main content div */
    height: 527px; /* height of the main content div */
    width: 1120px; /* width of the main content div */
    overflow:auto;
}

.logo {
    left: 18%; /* left on the header div */
    top: 10%; /* margin top on the header div */
    position:absolute; /* position absolute according to the parent div */
}

ul {
    margin: 0; /* margin 0 */
    padding: 0; /* padding 0 */
}
 
ul.menu {
    height: 80px; /* height of the menu */
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    float:left; /* float to the left */
}
 
ul.menu li {
    list-style: none; /* no list style */
    float:left; /*  float to the left of div */
    height: 79px; /* height of the menu */
    text-align: center; /* center text in li item */
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );  /* Using -webkit-gradient to separate the background into two background colors  */
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); /* Also Using moz gradient to separate the background into two background colors  */
    }

 ul.menu li a:visited {
     text-decoration: none; /* no decoration on link when visited such as underline etc */
      color:black; /* text color black */
    }
ul.menu li a {
    display: block;  /* display in block format */
    padding: 0 20px; 
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;  /* allign link to center of li item */
    line-height: 79px;  /* height of the link text */
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69))); /* Using -webkit-gradient to separate the background into two background colors  */
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); /* Also Using moz gradient to separate the background into two background colors  */
    -webkit-transition-property: background;  /* apply transition on the background of li item */
    -webkit-transition-duration: 700ms; /* duration of transition */
    -moz-transition-property: background; /* apply transition on the background of li item for mozilla */
    -moz-transition-duration: 700ms; /* duration of transition for mozilla */
    text-decoration: none; /* no text decoration on link  */
    color:black;  /* black color on link */
    }
 
ul.menu li a:hover {
    background: transparent none; /* make background to not be transparent on hover */

}
 
ul.menu li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) ); /* Using -webkit-gradient to separate the background into two background colors  */
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%); /* Also Using moz gradient to separate the background into two background colors  */
}

.wrappernav {
    width: 21.7%; /* width of the navigation div */
    height: 80px; /* height of the navigation div */
    top: 9.5%; /* margin from top */
    right: 55%; /* margin from right */
    position:absolute; /* position absolute according to the parent div */
    background : #464646; /* use this background color */
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69))); /* Using -webkit-gradient to separate the background into two background colors  */
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69)); /* Also Using moz gradient to separate the background into two background colors  */
    border-top: 2px solid #939393; /* specify border solid,color and size  */
    margin-bottom: 30px; /*  margin from bottom */

}

/* same as wrappernav but for admin so the upload list item has place in it  */
.wrappernavadmin {
    width: 27%;
    height: 80px;
    top: 9.5%;
    right: 48%;
    position:absolute;
    background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    border-top: 2px solid #939393;
    margin-bottom: 30px;

}

#logout {
    position:absolute; /*  position absolute according to the parent div */
    margin-top: 4.2%; /* margin from top of div */
    margin-left: 69%; /* margin from left of div */
    font-size: 20px; /* font size of the logout linkbutton */
    height: 22px; /* height of the linkbutton */
}

h3.sidepanel {
    margin-top: 10%; /* margin from top of div */
    margin-left: 4%; /* margin from left of div */
   font-weight:bold; /* make the text bold */
   color:#1E6FB6; /* color the text */
   letter-spacing:0pt; /* space between letters */
   word-spacing:2pt; /* space between words */
   font-size:128%; /* size of text */
   text-align:left; /* float to the left of div */
   font-family:trebuchet MS, sans-serif; /* font on the text */
   line-height:1; /* height of the text */
   color: #9A9A9A; /* use this color on the text */
   text-shadow: 0 0 0.2em black, 0 0 0.2em #87F,0 0 0.2em #87F; /* shadow on text */
}

h1.titelsSidepanel {
    margin-top: 10%; /* margin from top of div */
    margin-left: 4%; /* margin from left of div */
   font-weight:bold; /* make the text bold */
   font-style:oblique; /* make the text cursive */
   color:#1E6FB6; /* use this text color */
   letter-spacing:0pt; /* space between letters */
   word-spacing:2pt; /* space between words */
   text-align:left; /* allign the text to the left */
   font-family:trebuchet MS, sans-serif; /* use this font */
   line-height:1; /* height of the text */
   color: #9A9A9A; /* color of text */
   text-shadow: 0 0 0.2em black, 0 0 0.2em #87F,0 0 0.2em #87F; /* shadow of text */
}

.profilepicture {
    position:absolute; /* position absolute according to the div */
    width: 50px; /* width of the profile image button */
    height: 50px; /*  height of the profile image button */
    top: 10%; /* top from div */
    left: 85%; /* left from div */
}

/*NAVIGATION CATEGORIES*/
#navigation{
    position:absolute;	/* position absolute according to parent div */
    top: 21%;  /* top margin from div */
    left: 35%; /* left margin from div */
	background: #9A9A9A; /* if gradient colors cant be read use this default color */
    height: 50px; /* height of navigation bar */
    width: 420px; /* width of navigation bar */
	background: -moz-linear-gradient(top, #9A9A9A 0%, #9A9A9A 100%); /* Using moz gradient to separate the background into two background colors for mozilla */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9A9A9A), color-stop(100%,#333333)); /* Using -webkit-gradient to separate the background into two background colors for chrome */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9A9A9A', endColorstr='#333333',GradientType=0 ); /* gradient used for internet explorer */
	border-radius: 8px; /* radius on border around navigation bar */
	box-shadow: inset #444 1px 1px 0, inset #444 -1px -1px 0; /* shadow on border  */
	-moz-box-shadow: inset #444 1px 1px 0, inset #444 -1px -1px 0; /* shadow on border for mozilla */
	border: 2px solid #868686; /* use this border, solid,color and size */
}

#navigation ul, #navigation li, div.menu ul, div.menu ul li, ul.menu, ul.menu li {
     list-style:none; /* no list style */
      padding:0; /* no padding */
      margin:0; /* no margin */
      display:inline; /* no distance between elements */
      top: 10%; /* top margin from parent div */ 
}

#navigation ul li { 
    float:left; /* float to the left */
    position:relative; /* position relative to the parent div */
}

#navigation ul li a { 
	display:block; /* display in a block format */
	padding:8px 12px;  /* padding between links */
	margin:1px;  /* margin between links */
	font-size:18px;  /* size of links */
	white-space:nowrap; /* no wrapping on links */
	border-radius:3px;  
    color:black; /* text color black on links */
	-webkit-transition: background .3s ease-in-out; /* transition when opening the category, to slowly fade in and out */
	-moz-transition: background .3s ease-in-out; /* transition for mozilla */
}

#navigation li a:visited {
     text-decoration: none; /* no decoration on visited links */
     color:black;  /* color black on vsited links */
}

#navigation ul li a:hover { 
background:	#E0E0E0; /* white background when hovering over link */
}

#navigation ul ul { 
	position:absolute;  /* position abslute according to parent */
	top:-99999px; /* make the position of the ul as close to the li as possible */
	left:0; /* straight down from the ul li item */
	opacity: 0; /* Hide sub level */
	-webkit-transition: opacity .5s ease-in-out; /* transition, fade in and out in 0.5s duration for chrome */
	-moz-transition: opacity .5s ease-in-out; /* transition, fade in and out in 0.5s duration for mozilla*/
	z-index:497;  /* random z-index to make sure the menu items is at top and not behind background etc */
	background:#868686; /* background color */ 
	padding: 2px; /* padding between ul */ 
	border:1px solid #444; /* border solid,size and color */ 
	border-top:none;  /* no border at top */ 
	box-shadow:#111 0 3px 4px; /* shadow on box */ 
	border-bottom-left-radius:6px;  /* border bottom left round corner radius */ 
	border-bottom-right-radius:6px;  /* border bottom right round corner radius */ 
}

#navigation ul li:hover>ul { /* the child ul of the li item */
opacity: 1; /* no transparent */ 
position:absolute; /* position absolute according to parent */ 
top:99%;  /* close to the upper of the parent */ 
left:0;  /* no left, straight down list */ 
}

#navigation ul ul li:hover>ul { /* for more uls if needed on the li item in the ul */
position:absolute; 
top:0; 
left:100%; 
opacity: 1;
z-index:497;
background:#333;
}
